<template>
    <div>
      <div class="banner"  v-show="!showBack" :style="opacityStyle">
        <router-link tag="span" class="iconfont back" to="./">&#xe658;</router-link> <span>大连圣亚海洋馆</span>
      </div>
      <fade>
        <div class="detailBanner" @click="showPicNav">
          <router-link tag="span" class="iconfont back" to="./" v-show="showBack">&#xe658;</router-link>
          <img src="https://imgs.qunarzz.com/p/tts9/1809/a3/65b94487b7a26c02.jpg_r_390x260x90_6ee89c50.jpg">
          <div class="des">
            <span>大连世界海洋馆AAAAA</span>
            <div class="picSum">
              <span class="iconfont">&#xe610;</span><span>3</span>
            </div>
          </div>
        </div>
      </fade>

      <fade>
        <div class="picShow" v-show="showNav" @click="showPicNav">
          <swiper :options="swiperOption" >
            <swiper-slide ><img src="https://imgs.qunarzz.com/p/tts5/1808/93/884b084ebcd71a02.jpg_r_390x260x90_19858062.jpg"></swiper-slide>
            <swiper-slide ><img src="https://imgs.qunarzz.com/p/tts9/1809/a3/65b94487b7a26c02.jpg_r_390x260x90_6ee89c50.jpg"></swiper-slide>
            <swiper-slide ><img src="https://imgs.qunarzz.com/p/tts9/1809/ba/c858f5269fa9f202.jpg_r_390x260x90_1f150776.jpg"></swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
          </swiper>
        </div>

      </fade>

    </div>
</template>

<script>
    import fade from  '../../../comment/fade'
    export default {
        name: "banner",
        components:{
          fade
        },
        data(){
          return{
            swiperOption:{
              autoplay:true,
              pagination: {
                el: '.swiper-pagination',
                type:'fraction'
              },
            },
            showNav:false,
            showBack:true,
            opacityStyle:{
              opacity:0
            }
          }
        },
      methods:{
        showPicNav(){
          this.showNav=!this.showNav
        },
        handleScroll(){
          var top = document.documentElement.scrollTop
          if(top>200){
            this.showBack=false;
            this.opacityStyle.opacity=(top-100)/(240-100);
          }
          else {
            this.showBack=true
          }
        }
      },
      activated() {
        window.addEventListener('scroll',this.handleScroll)
      },
      deactivated () {
        window.removeEventListener('scroll', this.handleScroll)
      }
    }
</script>

<style scoped lang="stylus">
  @import "~commonStyle/comment.styl"
  .banner
    position fixed
    width 100%
    height $headerHeight
    background-color $bgColor
    line-height $headerHeight
    text-align center
    color #ffffff
    .back
      position: absolute;
      left: 0.3rem;
      color: #fff;
      font-size: 0.45rem;
  .detailBanner
    width 100%
    height 0
    padding-bottom 66.6%
    .back
      position absolute
      top .3rem
      left .3rem
      color #ffffff
      font-size .45rem
      border-radius 50%
      background-color rgba(238,238,238,.3)
    img
      width 100%
    .des
      position absolute
      width 90%
      color #ffffff
      font-size .45rem
      top 4rem
      padding .3rem
      left 0
      display: flex
      justify-content space-between
      .picSum
          font-size .33rem

  .picShow
    position: fixed
    top 0
    right 0
    bottom 0
    left 0
    z-index 999
    background-color #333333
    align-items center
    display flex
    justify-content center
    img
      width 100%

    .swiper-pagination
      color #ffffff
      bottom:2.2rem
      position: fixed
      font-size .34rem





</style>
